<template>
    <TabGrayEasyCard :title="'预算对标'" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab"
        :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList" :lineText="''" :barText="''"
        :unitText="''" :updateText="`${card.updateText}更新`">
        <slot>
            <el-table :data="card.tableData" height="100%">
                <el-table-column prop="subject_name" label="指标" :align="'left'" />
                <el-table-column label="预算" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.budget) }}
                    </template>
                </el-table-column>
                <el-table-column label="实际" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.actual) }}
                    </template>
                </el-table-column>
                <el-table-column label="完成率" :align="'right'">
                    <template #default="scope">
                        <span
                            :class="{ 'zs-text-red': scope.row.wcl_red == '1', 'zs-text-orange': scope.row.wcl_red == '2' }">{{
                                scope.row.pc }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="同比" :align="'right'">
                    <template #default="scope">
                        {{ scope.row.ear_erlier }}
                    </template>
                </el-table-column>
            </el-table>
        </slot>
    </TabGrayEasyCard>
</template>

<script setup>
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import { toThousands } from '@/utils/number-util'
import { reactive, watch } from 'vue'
import { reportLog } from '@/utils/reportLog'
import dashBoardApi from '@/api/Property/dashBoard'
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
    projectCode: {
        type: String,
        required: false,
        default: ''
    },
    menuKey: {
        type: String,
        required: false,
        default: ''
    },
    pageKey: {
        type: String,
        required: false,
        default: ''
    },
    permi: {
        type: String,
        required: false,
        default: ''
    }
})
const card = reactive(
    {
        tabs: [{ label: '累计', value: '累计' }, { label: '全年', value: '全年' }],
        curTab: '累计',
        tabRight: '',
        // grayCardList: [],
        unitText: '',
        updateText: '',
        tableData: [],
        // startDate: '',
        // endDate: '',
    }
)

watch(()=>props.projectCode,()=>{
    getChartData()
})

const getChartData = () => {
    dashBoardApi.propertyProjectCollectDetailApi({ projectCode: props.projectCode, timeType: card.curTab }).then((res) => {
        if (res.data.code == 200) {
            card.tabRight = res.data.data.time_lab
            card.tableData = res.data.data.detailData
            card.unitText = res.data.data.unit
            card.updateText = res.data.data.yearmonth
        }
    }).catch(err => {
        console.log(err)
    });
}

const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
    router.push({
        path: '/page/routeController/index',
        query: {
            rid: 'Property/PropertyDashBoardBudgetcAhievement',
            rTitle: '预算对标',
            projectCode: props.projectCode,
            menuKey: props.menuKey,
            pageKey: props.pageKey,
            yearmonth: card.updateText
        },
    })
}
const changeTab = (value) => {
    card.curTab = value
    getChartData()
}

getChartData()
</script>

<style scoped lang="scss"></style>
